import * as React from 'react';
import { Image, StyleSheet, Text, View, FlatList, ScrollView } from 'react-native';

export default function SearchList(props:any) {
    console.log('来自上一页面的参数', props.navigation.getState("SearchList"))
    console.log('来自上一页面的参数', props.navigation)
    const listData1 = [{
        id: '101',
        image: '//m.360buyimg.com/mobilecms/s120x120_jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg.dpg',
        msg1: '日本SAKURA樱花美术素描绘图专用橡皮擦XRFW-100考试专业高光象皮砖文具擦得干净 中号5块',
        msg2: '¥ 25.00',
        msg3: '5000+条评价 好评率98%',
    },{
        id: '102',
        image: '//img12.360buyimg.com/n2/s270x270_jfs/t1/36369/6/16167/108285/60ab1786E7b7009d7/b1818d374b55865c.jpg!q70.dpg.webp',
        msg1: '日本百乐（PILOT）JUICE彩色按动中性笔啫喱笔手账笔果汁笔 黑色 0.5mm 单支装 LJU-10EF-B原装进口',
        msg2: '¥ 28.00',
        msg3: '5000+条评价 好评率92%',
    },{
        id: '103',
        image: '//img11.360buyimg.com/n2/s270x270_jfs/t1/193157/23/19946/103434/6127088aE66ff0399/96759ac28380d740.jpg!q70.dpg.webp',
        msg1: '日本樱花（SAKURA）按动式中性笔0.5mm 活力果果系列签字笔水笔学生文具马卡龙五色套装 5支套装',
        msg2: '¥ 23.00',
        msg3: '5000+条评价 好评率91%',
    },{
        id: '104',
        image: '//m.360buyimg.com/mobilecms/s120x120_jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg.dpg',
        msg1: '日本SAKURA樱花美术素描绘图专用橡皮擦XRFW-100考试专业高光象皮砖文具擦得干净 中号5块',
        msg2: '¥ 25.00',
        msg3: '5000+条评价 好评率98%',
    },{
        id: '105',
        image: '//img12.360buyimg.com/n2/s270x270_jfs/t1/36369/6/16167/108285/60ab1786E7b7009d7/b1818d374b55865c.jpg!q70.dpg.webp',
        msg1: '日本百乐（PILOT）JUICE彩色按动中性笔啫喱笔手账笔果汁笔 黑色 0.5mm 单支装 LJU-10EF-B原装进口',
        msg2: '¥ 28.00',
        msg3: '5000+条评价 好评率92%',
    },{
        id: '106',
        image: '//img11.360buyimg.com/n2/s270x270_jfs/t1/193157/23/19946/103434/6127088aE66ff0399/96759ac28380d740.jpg!q70.dpg.webp',
        msg1: '日本樱花（SAKURA）按动式中性笔0.5mm 活力果果系列签字笔水笔学生文具马卡龙五色套装 5支套装',
        msg2: '¥ 23.00',
        msg3: '5000+条评价 好评率91%',
    },{
        id: '107',
        image: '//m.360buyimg.com/mobilecms/s120x120_jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg.dpg',
        msg1: '日本SAKURA樱花美术素描绘图专用橡皮擦XRFW-100考试专业高光象皮砖文具擦得干净 中号5块',
        msg2: '¥ 25.00',
        msg3: '5000+条评价 好评率98%',
    },{
        id: '108',
        image: '//img12.360buyimg.com/n2/s270x270_jfs/t1/36369/6/16167/108285/60ab1786E7b7009d7/b1818d374b55865c.jpg!q70.dpg.webp',
        msg1: '日本百乐（PILOT）JUICE彩色按动中性笔啫喱笔手账笔果汁笔 黑色 0.5mm 单支装 LJU-10EF-B原装进口',
        msg2: '¥ 28.00',
        msg3: '5000+条评价 好评率92%',
    },{
        id: '109',
        image: '//img11.360buyimg.com/n2/s270x270_jfs/t1/193157/23/19946/103434/6127088aE66ff0399/96759ac28380d740.jpg!q70.dpg.webp',
        msg1: '日本樱花（SAKURA）按动式中性笔0.5mm 活力果果系列签字笔水笔学生文具马卡龙五色套装 5支套装',
        msg2: '¥ 23.00',
        msg3: '5000+条评价 好评率91%',
    }];
    const skipToPage1 = (item:any) => {
        props.navigation.navigate('GoodDetail', {
            title: item.id,//'商品标题',
        });
    };
    const renderListItem = ({ item }) => {
        return (<View style={searchListStyles.listItem} onClick={() => skipToPage1(item)}>
            <View style={searchListStyles.lSide}>
                <Image
                    style={searchListStyles.itemImage}
                    source={{
                        uri: item.image,
                    }}
                />
            </View>
            <View style={searchListStyles.rSide}>
                <View style={searchListStyles.msgLine1}><Text>{item.msg1}</Text></View>
                <Text style={searchListStyles.msgLine2}>{item.msg2}</Text>
                <Text style={searchListStyles.msgLine3}>{item.msg3}</Text>
            </View>
        </View>);
    };

    return (
        <ScrollView style={styles.container}>
            <FlatList
                data={listData1}
                renderItem={renderListItem}
                keyExtractor={item => item.id}
            />
        </ScrollView>
    );
}

const styles = StyleSheet.create({
    container: {
        display: 'flex',
        flexDirection: 'row',
    },
    lSide: {
        width: 86,
    },
    rSide: {
        flex: 1,
    },
});

const searchListStyles = StyleSheet.create({
    listItem: {
        display: 'flex',
        flexDirection: 'row',
        backgroundColor: '#FFF',
        paddingLeft: 10,
        paddingRight: 10,
    },
    lSide: {
        width: 120,
    },
    itemImage: {
        width: 120,
        height: 120,
    },
    rSide: {
        flex: 1,
        paddingLeft: 10,
        paddingTop: 10,
        borderBottomWidth: 0.5,
        borderBottomStyle: 'solid',
        borderBottomColor: '#f8f8f8',
    },
    msgLine1: {
        color: '#1a1a1a',
        display: '-webkit-box',
        WebkitLineClamp: 2,
        WebkitBoxOrient: 'vertical',
        wordBreak: 'break-all',
        overflow: 'hidden',
        textOverflow: 'ellipsis',
    },
    msgLine2: {
        color: '#e4393c',
        marginTop: 10,
    },
    msgLine3: {
        color: '#999',
        fontSize: 12,
    },
});
